<template>
	<view class="page detail-page">
		<!-- 等额本息 -->
		<view v-show="result.repayType === 'repay1'" class="content">
			<view class="form-item">
				<label class="item-label">每月还款：</label>
				<view class="item-content">
					<text class="text">{{result.newResult}}元</text>
				</view>
			</view>
			<view class="form-item">
				<label class="item-label">贷款金额：</label>
				<view class="item-content">
					<text class="text">{{result.totalLoans}}元</text>
				</view>
			</view>
			<view class="form-item">
				<label class="item-label">支付利息：</label>
				<view class="item-content">
					<text class="text">{{result.totalInterest}}元</text>
				</view>
			</view>
			<view class="form-item">
				<label class="item-label">还款总额：</label>
				<view class="item-content">
					<text class="text">{{result.totalPayMount}}元</text>
				</view>
			</view>
			<!-- ucharts渲染模板 -->
			<view class="uni-charts">
				<view class="qiun-columns">
					<view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
						<view class="qiun-title-dot-light">本金利息分布</view>
					</view>
					<view class="qiun-charts" >
						<canvas canvas-id="canvasPie" id="canvasPie" class="charts" @touchstart="touchPie"></canvas>
					</view>
				</view>
			</view>
		</view>
		<!-- 等额本金 -->
		<view v-show="result.repayType === 'repay2'" class="content">
			<view class="form-item">
				<label class="item-label">贷款金额：</label>
				<view class="item-content">
					<text class="text">{{result.totalLoans}}元</text>
				</view>
			</view>
			<view class="form-item">
				<label class="item-label">支付利息：</label>
				<view class="item-content">
					<text class="text">{{repay2TotalInterest}}元</text>
				</view>
			</view>
			<view class="form-item">
				<label class="item-label">还款总额：</label>
				<view class="item-content">
					<text class="text">{{repay2TotalPayMount}}元</text>
				</view>
			</view>
			每月还款：
			<view class="table table-head">
				<view>月份</view>
				<view>月供</view>
				<view>本金</view>
				<view>利息</view>
			</view>
			<view v-for="(item, index) in result.payList" :key="index" class="table">
				<view>{{index + 1}}</view>
				<view>{{item.monthlyPay}}</view>
				<view>{{item.principalMonthly}}</view>
				<view>{{item.principalAndinterest}}</view>
			</view>
		</view>
		<button class="mini-btn margin-top-20" type="primary" plain="true" @click="goBack">返回</button>
	</view>
</template>

<script>
	import uCharts from "@/components/u-charts/u-charts.js"
	//ucharts实例定义为全局变量，否则在小程序端报错
	let canvaPie = null
	export default {
		onLoad(option){
			this.result = getApp().globalData.houseLoanResult
			console.log(getApp().globalData)
			
			//初始化ucharts宽高
			this.cWidth=uni.upx2px(590);//750upx - 4* 40 upx
			this.cHeight=uni.upx2px(600);
			if(this.result.repayType === 'repay1'){
				let {totalLoans, totalInterest} = this.result
				this.serverData = [{
					name: '贷款金额',
					data: parseInt(totalLoans)
				},{
					name: '总利息',
					data: parseInt(totalInterest)
				}]
				let Pie={series: this.serverData}
				this.showPie("canvasPie", Pie)
			}else if(this.result.repayType === 'repay2'){
				this.result.payList.map(item => {
					this.repay2TotalPayMount += parseFloat(item.monthlyPay)
					this.repay2TotalInterest += parseFloat(item.principalAndinterest)
				})
				this.repay2TotalPayMount = this.repay2TotalPayMount.toFixed(2)
				this.repay2TotalInterest = this.repay2TotalInterest.toFixed(2)
			}
		},
		data(){
			return {
				result: {
					
				},
				//ucharts相关数据
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				serverData:'',
				repay2TotalPayMount: 0,//等额本金还款总额
				repay2TotalInterest: 0,//等额本金支付利息
			}
		},
		mounted() {
			
		},
		methods: {
			showPie(canvasId,chartData){
				canvaPie=new uCharts({
					$this:this,
					canvasId: canvasId,
					type: 'pie',
					fontSize:11,
					legend:{show:true},
					background:'#FFFFFF',
					pixelRatio:this.pixelRatio,
					series: chartData.series,
					animation: true,
					width: this.cWidth*this.pixelRatio,
					height: this.cHeight*this.pixelRatio,
					dataLabel: true,
					extra: {
						pie: {
						  lableWidth:15
						}
					},
				});
			},
			touchPie(e){
				canvaPie.showToolTip(e, {
					format: item => {
						return item.name + ':' + item.data 
					}
				});
			},
			goBack(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.detail-page {
		.content {
			// border: 1px solid $uni-border-color;
			background: $uni-bg-color-white;
			.table {
				width: 100%;
				display: flex;
				border-bottom: 1px solid $uni-border-color;
				view{
					flex: 1;
					padding: 12upx 0;
					text-align: center;
				}
			}
			.table-head{
				view{
					background: $uni-color-primary;
				}
			}
		}
	}
</style>
